import React, { memo,PureComponent } from 'react';
import { Card, Radio,Button } from 'antd';
import { Row,Col,FormattedMessage } from 'umi-plugin-react/locale';
import styles from './Analysis.less';
import FormationPie from './FormationPie';
import FormationBar from './FormationBar';
import FormationList from './FormationList';
import Yuan from '@/utils/Yuan';

class FormationStatistic extends PureComponent{
	constructor(props) {
	    super(props);
	    this.state = {
          salesType: "all",
          visbleWayByFormation: 'pie',
          modalFormationVisible: false
	    }
	}

  //编制统计表显示
  handleFormationModalVisible = flag => {
  	this.setState({
  		modalFormationVisible: !!flag,
  	});
  };

  //编制显示切换
  handleChangeFormationType = e => {
  	if(e.target.value == "bar") {
  		this.setState({
	 			visbleWayByFormation: "pie"
	    });
  	}else if(e.target.value == "pie"){
  		this.setState({
	 			visbleWayByFormation: "bar"
	    });
  	}else {
	  	this.setState({
	      salesType: e.target.value,
	    });
  	}
  };

  render() {
    const {
      dropdownGroup,
      loading,
      formationData
    } = this.props;

    const { salesType,visbleWayByFormation,modalFormationVisible } = this.state;

    return (
      <Card
        loading={loading}
        className={styles.salesCard}
        bordered={false}
        title={
          <FormattedMessage
            id="app.statisticanalysis.formationbyarea"
            defaultMessage="The Proportion of Sales"
          />
        }
        bodyStyle={{ padding: 24 }}
        extra={
          <div className={styles.salesCardExtra}>
            {dropdownGroup}
            <div className={styles.salesTypeRadio}>
              <Button onClick={()=> this.handleFormationModalVisible(true)} style={{marginRight: '10px'}}>
              	编制统计表
              </Button>
              <Radio.Group value={salesType} onChange={this.handleChangeFormationType}>
                {/*<Radio.Button value="all">
                  <FormattedMessage id="app.analysis.channel.all" defaultMessage="ALL" />
                </Radio.Button>
                <Radio.Button value="online">
                  <FormattedMessage id="app.analysis.channel.online" defaultMessage="Online" />
                </Radio.Button>
                <Radio.Button value="stores">
                  <FormattedMessage id="app.analysis.channel.stores" defaultMessage="Stores" />
                </Radio.Button>*/}
                {visbleWayByFormation == "bar"?(
                	<Radio.Button value="bar">
                  	<FormattedMessage id="app.analysis.channel.bar" defaultMessage="bar" />
                	</Radio.Button>
                ):(
                  <Radio.Button value="pie">
                    <FormattedMessage id="app.analysis.channel.pie" defaultMessage="pie" />
                  </Radio.Button>
                )}
              </Radio.Group>
            </div>
          </div>
        }
        style={{ marginTop: 24 }}
      >
        <h4 style={{ marginTop: 10, marginBottom: 32 }}>
          <FormattedMessage id="app.statisticanalysis.formationnum" defaultMessage="Sales" />
        </h4>
        {visbleWayByFormation == "bar"?(
        <FormationBar
          height={300}
          data={formationData}
        />
        ):(
       	<FormationPie
          hasLegend
          subTitle={<FormattedMessage id="app.statisticanalysis.formationnum" defaultMessage="Sales" />}
          total={() => <span>{formationData?formationData.reduce((pre, now) => now.y + pre, 0): null}</span>}
          data={formationData}
          valueFormat={value => <span>{value}</span>}
          height={270}
          lineWidth={4}
          style={{ padding: '8px 0' }}
        />
        )}
        <FormationList
          modalFormationVisible={modalFormationVisible}
          handleFormationModalVisible={this.handleFormationModalVisible}
        />
      </Card>
    )
  }
}

export default FormationStatistic;
